<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div"></div>
  <button id="button1">首页</button>
  <button id="button2">商城</button>
  <button id="button3">购物页</button>
  <button id="button4">我的</button>
</body>
<script>
  const button1 = document.querySelector('#button1');
  const button2 = document.querySelector('#button2');
  const button3 = document.querySelector('#button3');
  const button4 = document.querySelector('#button4');

  let _wr = function(type) {
    let orig = history[type];
    return function () {
      let rv = orig.apply(this,arguments)
      let e = new Event(type);
      e.arguments = arguments;
      window.dispatchEvent(e);
      return rv
    }
  }

  history.pushState = _wr('pushState');
  history.replaceState = _wr('replaceState');

  button1.addEventListener('click',() => {
    history.pushState({state:1},null,'./home')
  })
  button2.addEventListener('click',() => {
    history.pushState({state:2},null,'./shop')
  })
  button1.addEventListener('click',() => {
    history.pushState({state:3},null,'./shopping-cart')
  })
  button1.addEventListener('click',() => {
    history.pushState({state:4},null,'./mine')
  })

  window.addEventListener('pushState', e => {
    console.log(...e,arguments)
  })
</script>
</html>